<template>
  <div class="wallet">
    <div class="page-header">
      <h2 class="page-title">我的钱包</h2>
      <p class="page-subtitle">管理您的数字资产</p>
    </div>
    
    <el-row :gutter="24">
      <!-- 余额卡片 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="balance-card" shadow="hover">
          <div class="balance-display">
            <div class="balance-label">总资产 (USDT)</div>
            <div class="balance-value">{{ formatBalance(balance) }}</div>
            <div class="balance-actions">
              <el-button type="primary" size="large" @click="$router.push('/deposit')">
                <el-icon><Plus /></el-icon>
                充值
              </el-button>
              <el-button type="success" size="large" @click="$router.push('/transfer')">
                <el-icon><Right /></el-icon>
                转账
              </el-button>
              <el-button type="warning" size="large" @click="$router.push('/withdraw')">
                <el-icon><Download /></el-icon>
                提现
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 快速操作卡片 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="quick-actions-card" shadow="hover">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <el-button class="action-btn" @click="$router.push('/deposit')">
              <el-icon class="action-icon"><Plus /></el-icon>
              <span>充值</span>
            </el-button>
            <el-button class="action-btn" @click="$router.push('/transfer')">
              <el-icon class="action-icon"><Right /></el-icon>
              <span>转账</span>
            </el-button>
            <el-button class="action-btn" @click="$router.push('/withdraw')">
              <el-icon class="action-icon"><Download /></el-icon>
              <span>提现</span>
            </el-button>
            <el-button class="action-btn" @click="$router.push('/transactions')">
              <el-icon class="action-icon"><List /></el-icon>
              <span>交易记录</span>
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="24" style="margin-top: 24px">
      <!-- 钱包地址卡片 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="address-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>我的钱包地址</span>
              <el-button
                type="primary"
                size="small"
                @click="copyAddress"
              >
                <el-icon><DocumentCopy /></el-icon>
                复制地址
              </el-button>
            </div>
          </template>
          <div class="address-display">
            <el-input
              v-model="walletAddress"
              readonly
              class="address-input"
            >
              <template #append>
                <el-button @click="copyAddress">
                  <el-icon><DocumentCopy /></el-icon>
                </el-button>
              </template>
            </el-input>
            <div class="address-tip">
              <el-icon><InfoFilled /></el-icon>
              <span>请使用此地址接收USDT，确保使用正确的网络类型(ERC20)</span>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 二维码卡片 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="qr-card" shadow="hover" v-if="qrCodeUrl">
          <template #header>
            <span>收款二维码</span>
          </template>
          <div class="qr-code-container">
            <div class="qr-code">
              <img :src="qrCodeUrl" alt="QR Code" />
            </div>
            <p class="qr-tip">扫描二维码即可收款</p>
          </div>
        </el-card>
        <el-card class="qr-card" shadow="hover" v-else>
          <template #header>
            <span>收款二维码</span>
          </template>
          <el-empty description="正在生成二维码..." />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Right, Download, List, DocumentCopy, InfoFilled } from '@element-plus/icons-vue'
import QRCode from 'qrcode'
import { walletApi } from '../api/wallet'

const balance = ref(0)
const walletAddress = ref('')
const qrCodeUrl = ref('')

onMounted(async () => {
  await loadWalletData()
})

const loadWalletData = async () => {
  try {
    // 获取余额
    const balanceData = await walletApi.getBalance()
    balance.value = balanceData.total || 0
    
    // 获取钱包地址
    const addressData = await walletApi.getAddress('USDT')
    walletAddress.value = addressData.address || ''
    
    // 生成二维码
    if (walletAddress.value) {
      await generateQRCode()
    }
  } catch (error) {
    console.error('加载钱包数据失败:', error)
  }
}

const generateQRCode = async () => {
  if (!walletAddress.value) return
  
  try {
    qrCodeUrl.value = await QRCode.toDataURL(walletAddress.value, {
      width: 250,
      margin: 2,
      errorCorrectionLevel: 'M'
    })
  } catch (error) {
    console.error('生成二维码失败:', error)
  }
}

const copyAddress = () => {
  if (!walletAddress.value) {
    ElMessage.warning('钱包地址未生成')
    return
  }
  
  navigator.clipboard.writeText(walletAddress.value).then(() => {
    ElMessage.success('地址已复制到剪贴板')
  }).catch(() => {
    ElMessage.error('复制失败')
  })
}

const formatBalance = (value: number) => {
  return value.toFixed(4)
}
</script>

<style scoped>
.wallet {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.balance-card {
  height: 100%;
  min-height: 280px;
}

.balance-display {
  text-align: center;
  padding: 20px 0;
}

.balance-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.balance-value {
  font-size: 56px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 32px;
  line-height: 1;
}

.balance-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.quick-actions-card {
  height: 100%;
  min-height: 280px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  width: 100%;
  height: 48px;
  justify-content: flex-start;
  padding-left: 20px;
}

.action-icon {
  margin-right: 12px;
  font-size: 18px;
}

.address-card,
.qr-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.address-display {
  padding: 10px 0;
}

.address-input {
  margin-bottom: 16px;
}

.address-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 6px;
  font-size: 12px;
  color: #606266;
}

.address-tip .el-icon {
  color: #409eff;
  font-size: 16px;
}

.qr-code-container {
  text-align: center;
  padding: 20px 0;
}

.qr-code {
  display: inline-block;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.qr-code img {
  width: 220px;
  height: 220px;
  display: block;
}

.qr-tip {
  font-size: 12px;
  color: #909399;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .balance-value {
    font-size: 40px;
  }
  
  .balance-actions {
    flex-direction: column;
  }
  
  .balance-actions .el-button {
    width: 100%;
  }
  
  .qr-code img {
    width: 180px;
    height: 180px;
  }
}
</style>

